<template>
    <div class="button-box-add-admin">
      <el-button type="primary" @click="disableType = true">添加管理员</el-button>
    </div>
    <el-table :data="newGoodsList" style="width: 100%" height="600px">
      <el-table-column label="索引" width="100">
        <template #default="scope"
          ><span>{{
            scope.$index + 1 + (pageData.count - 1) * pageData.limitNum
          }}</span></template
        >
      </el-table-column>
      <el-table-column prop="adminname" label="管理员名称" width="130" />
      <el-table-column prop="adminid" label="管理员id" width="600" />
      <el-table-column label="管理员等级">
        <template #default="scope">
          <el-tag>{{ scope.row.role === 1 ? "超级管理员" : "普通管理员" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="管理操作">
        <template #default="scope">
          <el-popconfirm
            title="您确定删除此管理员的信息吗?"
            @confirm="delAdminData(scope.row.adminid)"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      v-model:current-page="pageData.count"
      v-model:page-size="pageData.limitNum"
      :total="adminDataList.length || 0"
      :style="{ justifyContent: 'center' }"
    />
  <AddAdmin v-model:visible="disableType" @requestData="getadminListData" />
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { getAdminListDataApi, delAdminDataApi } from "../../api/admin";
import AddAdmin from "./AddAdmin.vue";

const pageData = ref({
  // 控制列表页数的数据
  count: 1,
  // 控制一页展示多少管理员数据的数据
  limitNum: 7,
});

// 提前准备的获取管理员列表的数据
const adminDataList = ref([]);

// 创建一个控制注册弹出层显示或隐藏的数据
const disableType = ref(false)

// 获取列表数据的方法
const getadminListData = async () => {
  try {
    const res = await getAdminListDataApi();
    // console.log(res);
    adminDataList.value = res.data;
  } catch (error) {
    console.log(error);
  }
};

// 挂载时就调用一次获取列表数据的方法
onMounted(() => {
  getadminListData();
});

// 删除管理员的方法
const delAdminData = async (id) => {
  try {
    await delAdminDataApi({ adminid: id });
    await getadminListData();
  } catch (error) {}
};

// 截取分页器展示使用的数据的方法
const newGoodsList = computed(() => {
  const listStart = (pageData.value.count - 1) * pageData.value.limitNum;
  return (
    JSON.parse(JSON.stringify(adminDataList.value)).slice(
      listStart,
      listStart + pageData.value.limitNum
    ) || []
  );
});

</script>
<style lang="scss"></style>
